<template>
  <div class="delay-date">
    <sec-form :formData="formData" :ruleForm="ruleForm" :rules="rules" :loadingProp="loadingProp">
      <template v-slot:repireTimeLabel
        >修复截止日期
        <el-tooltip content="最晚修复日期，修复截止日期之后将会继续收到工单的跟催提醒" placement="top">
          <el-button type="text" icon="el-icon-question"></el-button> </el-tooltip
      ></template>
      <template v-slot:repireTime>
        <el-date-picker
          v-model="ruleForm.repireTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择截止日期（天）"
        >
        </el-date-picker>
      </template>
    </sec-form>
  </div>
</template>

<script>
import { delayDateApi, delayDetailApi } from "api/taskCenterApi";
export default {
  name: "delayDateForm",
  props: {
    datas: Array,
  },
  components: {},
  data() {
    return {
      ruleForm: { repireTime: "", remark: "" },
      loadingProp: { confirm: false },
      rules: {
        repireTime: this.config.selectRule,
        remark: this.config.inputRule,
      },
      formData: [
        { type: "slot", prop: "repireTime" },
        { type: "textarea", autosize: { minRows: 4, maxRows: 6 }, label: "延期原因说明", prop: "remark" },
        {
          type: "operation",
          style: "text-align:right",
          children: [
            {
              label: "取消",
              click: () => {
                this.$emit("cancel");
              },
            },
            {
              label: "确定",
              prop: "confirm",
              click: () => {
                this.delayDateHandle();
              },
            },
          ],
        },
      ],
    };
  },
  computed: {},
  created() {
    if (this.datas.length == 1) {
      this.initDelayDetail();
    }
  },
  mounted() {},
  methods: {
    initDelayDetail() {
      delayDetailApi({ processId: this.datas[0].processId }).then((res) => {
        let { repireTime, remark } = res.data;
        this.ruleForm.repireTime = repireTime;
        this.ruleForm.remark = remark;
      });
    },
    delayDateHandle() {
      this.loadingProp.confirm = true;
      console.log(this.datas);
      let processIds = this.datas.map((item) => item.processId);
      let { repireTime, remark } = this.ruleForm;

      delayDateApi({ processIds, repireTime, remark }).then((res) => {
        let state = this.message.state(res);
        if (!state) return;
        this.loadingProp.confirm = false;
        this.$emit("confirm-success");
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
